<template>
  <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
    <el-table-column prop="A" label="客户来源" width="180" />
    <el-table-column prop="B" label="客户数量" width="180" />
    <el-table-column prop="C" label="客户占比" />

  </el-table>
</template>
<script lang="ts" setup>
import { ref, watch, onMounted, defineProps } from 'vue';
interface User {
  date: string
  name: string
  address: string
}

interface IProps {
  data: Array<any>;
}

const props = defineProps<IProps>();
const tableArray = ref<User[]>(props.data.filter(obj => obj.hasOwnProperty('A') && obj.hasOwnProperty('B') && obj.hasOwnProperty('C')));

watch(() => props.data, (newData) => {

  if (newData) {
    const newArray = newData.filter(obj => obj.hasOwnProperty('A') && obj.hasOwnProperty('B') && obj.hasOwnProperty('C'));
    tableArray.value = newArray;
  }
});

//变色
const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: User
  rowIndex: number
}) => {
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
  return ''
}
const brnn = () => {

  const newArray = props.data.filter(obj => obj.hasOwnProperty('A') && obj.hasOwnProperty('B') && obj.hasOwnProperty('C'));
  console.log(newArray)
}

const tableData = tableArray
</script>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>